<template>
  <el-dialog
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    @close="closeDialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="form_rules"
      :label-width="dialog.formLabelWidth"
    >
      <!-- <el-col :span="12" class="marginBottom">
        <el-form-item prop="caCode" label="资产编号:">
          <el-input v-model="form.caCode" type="text" />
        </el-form-item>
      </el-col> -->
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="bankAccount" label="付款银行:">
          <el-select
            style="width:100%"
            v-model="form.bankAccount"
            filterable
            placeholder=""
          >
            <el-option
              v-for="item in basBankList"
              :key="item.bankAccount"
              :label="item.bankAccount"
              :value="item.bankAccount"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="subjectCode" label="科目">
          <treeselect
            v-model="form.subjectCode"
            :normalizer="normalizer"
            :options="rootOptionsSelect"
            placeholder=""
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="marginBottom">
        <el-form-item prop="inOutType" label="收资类型:">
          <el-select
            style="width:100%"
            v-model="form.inOutType"
            filterable
            placeholder=""
          >
            <el-option
              label="收入"
              value="收入"
            >
            </el-option>
            <el-option
              label="支出"
              value="支出"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="marginBottom">
        <el-form-item prop="caName" label="资产名称:">
          <el-input v-model="form.caName" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="price" label="单价:">
          <el-input v-model="form.price" type="text" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="type" label="规格型号:">
          <el-input v-model="form.type" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="num" label="数量:">
          <el-input v-model.number="form.num" type="text" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="unitMeasurement" label="计量单位:">
          <el-input v-model.number="form.unitMeasurement" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="amount" label="金额:">
          <el-input disabled v-model="form.amount" type="text" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="marginBottom">
        <el-form-item prop="producingArea" label="产地:">
          <el-input v-model="form.producingArea" />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="marginBottom">
        <el-form-item prop="supplier" label="供应商:">
          <el-input v-model="form.supplier" />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="marginBottom">
        <el-form-item prop="manufacturer" label="制造商:">
          <el-input v-model="form.manufacturer" />
        </el-form-item>
      </el-col>
      <el-col :span="24" class="marginBottom">
        <el-form-item prop="userRemark" label="用户备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="form.userRemark"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div class="flex flex-row">
          <el-form-item label="附件">
            <div class="flex flex-row" style=" display: flex;align-items: center;">
              <div
                class="demo-image__preview"
                v-for="(item, index) in imageUrl"
                :key="index"
              >
              <a style="margin:10px;color:blue" href="item.path" target="_blank">{{item.realName}}</a>
                <!-- <el-image
                  style="width: 100px; height: 100px;margin-right: 5px"
                  :src="item"
                  :preview-src-list="[item]"
                >
                </el-image> -->
              </div>
            </div>
          </el-form-item>
          <el-upload
            class="upload-demo"
            :action="upload.url"
            :show-file-list="false"
            :headers="upload.headers"
            :on-success="setUrl"
          >
            <div class="addImg flex a-item j-content">+</div>
          </el-upload>
        </div>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit('form')"> 提 交 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getByParent,
  addOrSave,
  caAddOrSave,
  basBank,
  basSubject
} from "@/api/erp/fixedAssetsMain";
import { getToken } from "@/utils/auth";
import { Treeselect } from "@riophae/vue-treeselect";
export default {
  name: "AddDialogs",
  props: {
    isShow: Boolean,
    title: String,
    type: String,
    currentId: String,
    dialogRow: Object
  },
  components: {
    Treeselect
  },
  data() {
    return {
      isVisible: this.isShow,
      form: {
        caCode: "",
        bankAccount: "",
        caName: "",
        amount: null,
        price: null,
        type: null,
        num: null,
        unitMeasurement: null,
        producingArea: null,
        supplier: null,
        manufacturer: null,
        userRemark: null,
        attachFileList: [],
        inOutType:'',
        id: null
      },
      rootOptionsSelect: [],
      basBankList: [], //银行账户
      disabel: false,
      form_rules: {
        caCode: [{ required: true, message: "不能为空！", trigger: "blur" }],
        bankAccount: [{ required: true, message: "不能为空！", trigger: "change" }],
        caName: [{ required: true, message: "不能为空！", trigger: "blur" }],
        price: [
          { required: true, message: "不能为空！", trigger: "blur" },
          {
            pattern: /(^(([1-9]{1}[0-9]*)|([0]{1}))([.]{1}[0-9]{2})$)/,
            message: "价格格式不对，格式如： 1.00",
            trigger: "change"
          }
          // { pattern: /^[0-9.]*$/, message: "请输入数字", trigger: "change" } // 可以输入多位正整数]
        ],
        num: [
          { required: true, message: "不能为空！", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "请输入数字", trigger: "change" } // 可以输入多位正整数]
        ],
        inOutType:[{ required: true, message: "不能为空！", trigger: "change" }],
        amount: [
          { required: true, message: "不能为空！", trigger: "blur" },
          {
            pattern: /(^(([1-9]{1}[0-9]*)|([0]{1}))([.]{1}[0-9]{2})$)/,
            message: "价格格式不对，格式如： 1.00",
            trigger: "change"
          }
          // { pattern: /^[0-9.]*$/, message: "请输入数字", trigger: "change" } // 可以输入多位正整数]
        ]
      },
      // 详情弹框信息
      dialog: {
        width: "800px",
        formLabelWidth: "120px"
      },
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: "",
        // 上传的文件列表
        fileList: [],
        fileList1: [],
        // 公章图片列表
        stampImgList: [],
        // 门店图片列表
        imageList: []
      },
      imageUrl: []
    };
  },
  watch: {
    "form.price": {
      handler(newVal, oldVal) {
        let reg = /(^(([1-9]{1}[0-9]*)|([0]{1}))([.]{1}[0-9]{2})$)/;
        if (!reg.test(newVal)) return;
        if (newVal && this.form.num) {
          this.form.amount = (newVal * this.form.num).toFixed(2);
        }
      },
      deep: true
    },
    "form.num": {
      handler(newVal, oldVal) {
        if (newVal && this.form.price) {
          this.form.amount = (newVal * this.form.price).toFixed(2);
        }
      },
      deep: true
    }
  },
  created() {
    this.upload.url =
      window.location.href
        .split("/")
        .slice(0, 3)
        .join("/") + "/api/caFile/upload";
  },
  mounted() {
    if (this.type === "edit") {
      this.form = this.dialogRow;
      this.form.price = Number(this.dialogRow.price.toString()).toFixed(2)
      this.form.amount = Number(this.dialogRow.amount.toString()).toFixed(2)
      this.disabel = true;
    } else {
      this.disabel = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    }
    this.getbasBank();
    this.getRootModels();
  },
  methods: {
    setUrl(val) {
      console.log(val,666)
      this.imageUrl.push(val.data.result);
      this.form.attachFileList.push(val.data.result.path)
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
    /** 获取可科目 **/
    getRootModels() {
      const sort = "id,desc";
      const params = {};

      basSubject(params).then(res => {
        this.rootOptionsSelect = res.data.content;
      });
    },
    // 表单提交
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          // 表单数据验证完成之后，提交数据;
          let formData = this.form;
          formData.typeId = this.currentId;
          const para = { ...formData };
          console.log(para);
          // edit
          if (this.type === "edit") {
            caAddOrSave(para).then(res => {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.isVisible = false;
              this.$emit("getFundList");
            });
          } else {
            // add
            caAddOrSave(para).then(res => {
              console.log(res);
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.isVisible = false;
              this.$emit("getFundList");
            });
          }
        }
      });
    },
    // 银行账户
    getbasBank() {
      const para = {};
      basBank(para).then(res => {
        this.basBankList = res.data.content;
      });
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      if (!node.children) {
        delete node.children;
      }
      return {
        id: node.code,
        label: node.name,
        children: node.children
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.marginBottom {
  margin-bottom: 12px !important;
}
.addImg {
  font-size: 60px;
  border: rgb(203, 203, 203) 1px dashed;
  width: 102px;
  height: 102px;
  cursor: pointer;
  margin-top: 2px;
 
}
</style>
